<template>
  <div class="box">
    <!-- 搜索 -->
    <search :ipt="ipt" slot="cancal" @item-tap="item">
      <router-link :to="`/?isLogin=${isLogin}`">取消</router-link></search
    >
    <!-- 排行 -->
    <div class="search-hot" v-if="isOpen">
      <p class="hot">热门搜索</p>
      <loading-comp v-if="isShow"></loading-comp>
      <ul>
        <li v-for="(item, i) in data" :key="item.comic_id">
          <router-link :to="`/detail?id=${item.comic_id}&isLogin=${isLogin}`">
            <div>
              <div class="tap">{{ i + 1 }}</div>
              <div class="search-hot-img">
                <img :src="item.vertical_cover" />
              </div>
              <div>
                <p class="search-hot-title">{{ item.title }}</p>
                <p class="search-hot-lable">{{ item.styles[0].name }}</p>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import search from "@/components/Search";
import LoadingComp from "@/components/LoadingComp.vue";

import { get } from "@/http/request.js";

export default {
  name: "SeachView",
  components: {
    search,
    LoadingComp,
  },
  data() {
    return {
      data: [],
      ipt: false,
      isOpen: true,
      isShow: true,
      isLogin: this.$route.query.isLogin,
    };
  },
  methods: {
    // 初始化排行榜
    async initList() {
      await get(
        `https://apis.netstart.cn/bcomic/GetRankInfo?id=7&offset=0&subId=0`
      ).then((data) => {
        if (data && data.code === 0) {
          // console.log("排行榜", data);
          this.data = data.data.list;
          this.data = this.data.slice(0, 6);
          // console.log("排行榜2", this.data);
        }
      });
      this.isShow = false;
    },
    item(isOpen) {
      this.isOpen = isOpen;
    },
  },
  mounted() {
    this.initList();
    this.ipt = true;
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.box {
  // background-color: rgba(255, 125, 147, 0.829);
  .search-hot {
    padding: $p;
    border-top: 1px solid #ddd;
    .hot {
      color: #9b9fa5;
      font-size: 3.2vw;
      font-weight: 600;
      margin: 3vw 0;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li:nth-child(3) ~ li .tap {
        color: #aaa;
      }
      li {
        width: 50%;
        // border: 1px solid #000;
        height: 20vw;
        display: flex;

        a {
          display: block;
          padding: 2vw 0;
          width: 100%;
          div {
            display: flex;
            width: 100%;
            height: 100%;
            position: relative;
            div:nth-child(1) {
              width: 8vw;
              position: absolute;
              left: 0;
              line-height: 15.4667vw;
              font-size: 7vw;
              color: $bgc;
            }
            .search-hot-img {
              height: 100%;
              width: 12vw;
              margin-left: 6vw;
              img {
                height: 100%;
              }
            }
            div:nth-child(3) {
              padding-left: 2vw;
              display: block;
              width: 29.3333vw;
              p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .search-hot-title {
                height: 8vw;
                line-height: 8vw;
                font-size: 3.7333vw;
              }
              .search-hot-lable {
                color: #9b9fa5;
                font-size: 3.2vw;
              }
            }
          }
        }
      }
    }
  }
}
</style>